<template>
  <div>
    <main>
      <div class="h80">
        尊敬的用户您好，为了更准确的制定学习计划，请完成以下题目，感谢您的配合
      </div>

      <div class="tips" v-if="isMbShow == false">
        成功的人都需要先树立一个小目标~
      </div>
      <!-- 目标分数 -->
      <el-form
        :model="surveyForm"
        :rules="rules"
        ref="surveyFormRef"
        label-width="6.25rem"
      >
        <div class="target" v-if="isMbShow == false">
          <div>
            <span class="target_title">目标总分</span>
            <el-form-item prop="mTotal">
              <el-input
                type="text"
                v-model.number="surveyForm.mTotal"
                @blur="BlurText($event)"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <span class="target_title">目标听力</span>
            <el-form-item prop="mTingli">
              <el-input
                prop="mTingli"
                v-model.number="surveyForm.mTingli"
                @blur="BlurText($event)"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <span class="target_title">目标口语</span>
            <el-form-item prop="mKouyu">
              <el-input
                @blur="BlurText($event)"
                v-model.number="surveyForm.mKouyu"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <span class="target_title">目标朗读</span>
            <el-form-item prop="mLangdu">
              <el-input
                @blur="BlurText($event)"
                v-model.number="surveyForm.mLangdu"
              ></el-input>
            </el-form-item>
          </div>
          <div>
            <span class="target_title">目标写作</span>
            <el-form-item prop="mXiezuo">
              <el-input
                @blur="BlurText($event)"
                v-model.number="surveyForm.mXiezuo"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="question">
          1. 请问同学每天大概的学习时间是多久？
          <el-form-item prop="radio_1">
            <el-radio fill="#ff5e4e" v-model="surveyForm.radio_1" label="1"
              >A)2小时内</el-radio
            >
            <el-radio v-model="surveyForm.radio_1" label="2"
              >B)2-4小时</el-radio
            >
            <el-radio v-model="surveyForm.radio_1" label="3"
              >C)4-6小时</el-radio
            >
            <el-radio v-model="surveyForm.radio_1" label="4"
              >D)6小时以上</el-radio
            >
          </el-form-item>
        </div>
        <div class="question">
          2. 请问同学自评自己英语基础如何？
          <el-form-item prop="radio_2">
            <el-radio fill="#ff5e4e" v-model="surveyForm.radio_2" label="1"
              >A)不太理想，需要提升基础和硬实力</el-radio
            >
            <el-radio v-model="surveyForm.radio_2" label="2"
              >B)还可以，通过了英语4级或者雅思总分有6分</el-radio
            >
            <el-radio v-model="surveyForm.radio_2" label="3"
              >C)不错，通过了英语6级，或者雅思总分7分</el-radio
            >
            <el-radio v-model="surveyForm.radio_2" label="4"
              >D)很好，熟练应用英语，雅思8分以上</el-radio
            >
          </el-form-item>
        </div>
        <div class="question">
          3. 请问同学是否系统的学习过PTE的技巧？
          <el-form-item prop="radio_3">
            <el-radio fill="#ff5e4e" v-model="surveyForm.radio_3" label="1"
              >A)没接触过PTE</el-radio
            >
            <el-radio v-model="surveyForm.radio_3" label="2"
              >B)不是很系统，缺乏各题型的技巧学习</el-radio
            >
            <el-radio v-model="surveyForm.radio_3" label="3"
              >C)系统学习过技巧，也练习了很多，但是效果不好</el-radio
            >
            <el-radio v-model="surveyForm.radio_3" label="4"
              >D)系统培训过，技巧基本掌握，但是练习不足</el-radio
            >
          </el-form-item>
        </div>
        <div class="question">
          4. 请问这些关于PTE的核心技巧是否掌握？<br />
          口语：断句，气息，眼嘴协调，最佳语速，连读，均匀，拼读生词，重读，重音
          <br />
          听力：WFD首字母记忆法 写作：SWT 8类记忆法<br />
          阅读：完形填空的7步骤，RO的5大原则<br />

          <el-form-item prop="radio_4">
            <el-radio fill="#ff5e4e" v-model="surveyForm.radio_4" label="1"
              >A)完全不懂</el-radio
            >
            <el-radio v-model="surveyForm.radio_4" label="2"
              >B)只听说过一部分</el-radio
            >
            <el-radio v-model="surveyForm.radio_4" label="3"
              >C)已经掌握，需要多练习</el-radio
            >
            <el-radio v-model="surveyForm.radio_4" label="4"
              >D)完全掌握</el-radio
            >
          </el-form-item>
        </div>
        <div class="question">
          5. 请问同学觉得以下几项中，哪一项对自己帮助最大？
          <el-form-item prop="radio_5">
            <el-radio fill="#ff5e4e" v-model="surveyForm.radio_5" label="1"
              >A)制定学习计划，科学复习</el-radio
            >
            <el-radio v-model="surveyForm.radio_5" label="2"
              >B)我的成绩单分析，确定复习方向</el-radio
            >
            <el-radio v-model="surveyForm.radio_5" label="3"
              >C)老师批改反馈我的作业</el-radio
            >
            <el-radio v-model="surveyForm.radio_5" label="4"
              >D)老师根据我的问题，选择我需要优先练习的预测真题</el-radio
            >
          </el-form-item>
          <div class="makeplan">
            <router-link @click.native="formulateStudyPlan" to=""
              >作答完毕，制定计划</router-link
            >
          </div>
        </div>
      </el-form>
    </main>
  </div>
</template>

<script>
import { sendPost } from "../../../utils/http";
import api from "../../../config/api";

export default {
  data () {
    return {
      surveyForm: {
        mTotal: '', //目标总分
        mKouyu: '', //目标口语
        mTingli: '', // 目标听力
        mLangdu: '', //目标阅读
        mXiezuo: '', //目标写作
        radio_1: '',
        radio_2: '',
        radio_3: '',
        radio_4: '',
        radio_5: '',
      },
      rules: {
        // 分数校验规则
        mTotal: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        mKouyu: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        mTingli: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        mLangdu: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        mXiezuo: [{ type: 'number', required: true, message: '请填大于等于0的分数', trigger: 'blur' }],
        radio_1: [{ type: 'string', required: true, message: '此选项为必填项', trigger: 'blur' }],
        radio_2: [{ type: 'string', required: true, message: '此选项为必填项', trigger: 'blur' }],
        radio_3: [{ type: 'string', required: true, message: '此选项为必填项', trigger: 'blur' }],
        radio_4: [{ type: 'string', required: true, message: '此选项为必填项', trigger: 'blur' }],
        radio_5: [{ type: 'string', required: true, message: '此选项为必填项', trigger: 'blur' }],
      },
      isMbShow: '', // 目标分数是否显示
    }
  },
  watch: {
    isMbShow: {
      handler () {

        // true 就不再显示目标分数
        if (sessionStorage.getItem('mbFlag') == 'true') {
          this.isMbShow = true
        }
        if (sessionStorage.getItem('mbFlag') == 'false') {
          this.isMbShow = false
        }
      }
    }
  },
  created () {
    this.isMbShow = sessionStorage.getItem('mbFlag')
  },
  methods: {
    formulateStudyPlan () {
      var that = this
      this.$refs.surveyFormRef.validate(valid => {
        if (valid) {
          sendPost(api.formulateStudyPlan, {}).then(res => {
            that.$router.push("studyplan")
          })
        }
      })
    },
    // 校验输入框数字
    BlurText (e) {
      let boolean = new RegExp(/^\+?[0-9]\d*$/).test(e.target.value)
      if (!boolean) {
        this.$msg.warning('请输入大于等于0的正整数')
        e.target.value = ''
      }
    },
  }
}
</script>

<style lang="less" scoped>
.tips {
  height: 4.375rem;
  line-height: 4.375rem;
  font-size: 1.25rem;
  color: #999;
}
.target {
  height: 8.3125rem;
  display: flex;
  :last-child {
    margin-right: 0;
  }
  div {
    width: 9.1875rem;
    background: #fff;
    border: 0.125rem solid #ff5e4e;
    border-radius: 0.1875rem;
    margin-right: 1.5rem;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    span {
      height: 3.3125rem;
      line-height: 3.3125rem;
      text-align: center;
      background-color: #fff5f5;
      font-size: 1.125rem;
      font-weight: bold;
      color: #ff5e4e;
    }
    .el-input {
      border: none;
      outline: none;
      width: 100%;
      color: #333;
      font-size: 1.625rem;
      margin-top: 1.25rem;
    }
    .el-form-item {
      border: none;
      outline: none;
      width: 100%;
    }
    /deep/.el-form-item__content {
      border: none;
      outline: none;
    }
    /deep/.el-input__inner {
      outline: none;
      border: 0;
      padding: 0 2.5rem;
      text-align: center;
      font-weight: bold;
    }
  }
}

main[data-v-0be87277] {
  padding-bottom: 1.25rem;
}
main {
  padding: 0 1.25rem;
  box-sizing: border-box;
  .h80 {
    height: 5rem;
    line-height: 5rem;
    font-size: 1.25rem;
    border-bottom: 0.0625rem solid #ededed;
  }
}
.el-radio {
  font-size: 1rem;
  font-weight: bold;
  line-height: 3.125rem;
  color: #666;
  margin-right: 4.5rem;
}
/deep/.el-radio__input.is-checked .el-radio__inner {
  border-color: #ff5e4e;
  background: #ff5e4e;
} /* 选中后的字体颜色 */
/deep/.el-radio__input.is-checked + .el-radio__label {
  color: #ff5e4e !important;
}

.question {
  color: #333;
  font-size: 1rem;
  background-color: #fffafa;
  margin-top: 1.25rem;
  padding: 1.25rem;
  box-sizing: border-box;
}
/deep/.el-form-item__content {
  margin-left: 0.9375rem !important;
}
.makeplan {
  width: 20rem;
  height: 3.75rem;
  line-height: 3.75rem;
  color: #fff;
  background-color: #ff5e4e;
  border-radius: 0.1875rem;
  font-size: 1.5rem;
  margin: 3.5rem auto;
  cursor: pointer;
  a {
    color: #fff;
    display: inline-block;
    text-align: center;
    width: 100%;
    height: 100%;
  }
}
</style>
